<template>
  <div id="app">
    <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">
      <el-header>
        <top/>
      </el-header>
      <!--抬头结束-->
      <el-card style="width: 100%;height: 200px;background-color: rgba(0,0,0,30%)">
        <el-row class="demo-avatar demo-basic">
          <el-col :span="2">
            <div class="demo-basic--circle">
              <div class="block">
                <el-avatar :size="100" >
                  <img style="max-width: 100%;max-height: 100%"
                       :src="infoArr.avatar">
                </el-avatar>
              </div>
            </div>
          </el-col>
          <el-col :span="10" >
            <div class="operation">
              <el-col >
                <img style="width: 140px;float:left;height: 48px" :src="infoArr.headTitle">

              </el-col>
                <el-col>
                    <p style="font-size:15px;float:left;color: gold">{{infoArr.nickname}}</p>
                    <p style="color:red; float:left;">Lv:{{infoArr.level}}</p>

                </el-col>
                <el-col>
                    <p style="font-size: 12px;color: white">{{infoArr.described}}</p>
                </el-col>
              <div>
                <el-row>
                  <el-col>
                    <span style="color: white">原创:</span><span style="color: whitesmoke"> {{infoArr.blogCount}}</span>
                    <span style="margin-left: 20px;color: white">粉丝: </span><span style="color: whitesmoke">{{infoArr.fans}}</span>
                    <span style="margin-left: 20px;color: white">关注列表: </span><span style="color: whitesmoke">{{infoArr.follow}}</span>
                    <span style="margin-left: 20px;color: white">点赞: </span><span style="color: whitesmoke">{{infoArr.likeCount}}</span>
                    <span style="margin-left: 20px;color: white">访问量: </span><span style="color: whitesmoke">{{infoArr.visitCount}}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="position: relative;left: 80%;margin-top: 10%">
              <button @click="favor(infoArr)"
                      class="my_button" :style="{backgroundColor:bg_color, color: ft_color,}"
                      @mouseenter="change()" @mouseleave="goback()">
                {{ content }}
              </button>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-container>


        <el-main>
          <div>
            <el-row>
              <el-col v-for="b in blogData">
                <el-card class="card" style="background-color: rgba(255,255,255,70%);margin-bottom: 1%">
                  <el-row>
                    <el-col span="6">
                      <a @click="toDetail(b.id)">
                        <img :src="b.blogImg" style="width: 220px;height: 140px;">
                      </a>
                    </el-col>
                    <el-col span="18">
                      <a @click="toDetail(b.id)">
                        <p class="title_p">
                          <span class="title_span">{{ b.blogTitle }}</span>
                        </p>
                      </a>
                      <div>
                        <a @click="toOtherUser(b.userId)">
                          <span style="color: #0a001f;">作者:{{ b.name }}</span>
                        </a>
                      </div>
                      <div style="margin-top: 30px;">
                        <span><img src="../../assets/zan.png" style="width: 16px;height: 16px;">{{ b.likes }}赞</span>
                        <span style="margin-left: 30px;"><i class="el-icon-star-off"></i>{{ b.collects }}收藏</span>
                        <span style="margin-left: 30px;"><i class="el-icon-view"></i>{{ b.visit }}浏览量</span>
                        <span style="margin-left: 30px">#{{ b.typeName }}</span>
                        <span style="margin-left: 30px;"><i class="el-icon-time"></i>{{ b.createTime }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </div>


        </el-main>
      </el-container>
      <!--底部开始-->
        <Bottom/>

      <!--底部结束-->
    </el-container>
  </div>
</template>
<script>
import Top from "@/components/Top.vue";
import Bottom from "@/components/Bottom.vue";
import axios from "axios";
import '@/api/request'

export default {
  components: {Bottom, Top},
  el: '#app',
  data: function () {
    return {
      blogData: [],
      infoArr: {

      },

      liked:'',
      content: '',
      bg_color: "",
      ft_color: "",

    }
  },
  created() {
    this.userId = localStorage.getItem("userId");
    this.getBlogList(this.userId);
    this.queryUserInfo(this.userId);

  },
  mounted() {
  },
  methods: {
    favor(u) {
      this.followorclose(u);
      if (this.liked) {
        this.content = "已关注";
        this.bg_color = "#f56c6c";
        this.ft_color = "#fef0f0";
      } else {
        this.content = "+关注"
        this.bg_color = "#fef0f0";
        this.ft_color = "#f56c6c";

      }
    },
    followorclose(u){
      console.log("isfollow=="+u.isfollow);
      if(u.isfollow===1){
        this.liked=true;
        u.isfollow=0;
        console.log("isfollow="+u.isfollow);
        console.log("liked="+this.liked);
      }else {
        this.liked=false;
        u.isfollow=1;
        console.log("isfollow="+u.isfollow);
        console.log("liked="+this.liked);
      }
      axios.put("http://localhost:8088/userFollow/"+u.id+"/"+this.liked).then(response=>{
      })
    },
    change() {
      this.bg_color = "#ff9999";
      this.ft_color = "#fef0f0";
    },
    goback() {
      if (this.liked) {
        this.bg_color = "#f56c6c";
        this.ft_color = "#fef0f0";
      } else {
        this.bg_color = "#fef0f0";
        this.ft_color = "#f56c6c";
      }
    },



    queryUserInfo(userId){
      let url = 'http://localhost:8088/user/info/'+userId;
      axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code === 1) {
          this.infoArr = jsonResult.data;
          console.log("isfollow="+this.infoArr.isfollow)
          if (this.infoArr.isfollow===0){
            this.liked=true;
            this.content = "已关注";
            this.bg_color = "#f56c6c";
            this.ft_color = "#fef0f0";
          }else if (this.infoArr.isfollow===1){
            this.liked=false;
            this.content = "+关注"
            this.bg_color = "#fef0f0";
            this.ft_color = "#f56c6c";
          }
        }
      });


    },

    toDetail(id,userId) {
      localStorage.setItem('id', id);
        localStorage.setItem('userId', userId);
        window.location.href = "detail.html"
    },

    getBlogList(id) {
      let url = 'http://localhost:8088/blog/selectOtherBlog/'+id;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;

        if (jsonResult.code == 1) {
          this.blogData = jsonResult.data;
          console.log("blogList="+this.blogData)
        }
      });
    },

  }
}
</script>
<style>

.title_p {
  font-size: 30px;
  font-weight: 500;
  color: #222226;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-top: 4px;
  margin-bottom: 20px;
}

.title_span {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

.card:hover {
}

.el-main {
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/*走马灯开始*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.desc {
  height: 40px;
  color: #555666;
  font-size: 15px;
  font-weight: 400;
  overflow: hidden; /* 控制文本溢出是如何进行的 */
  word-break: break-word; /*自动换行*/
  white-space: nowrap;
  text-overflow: ellipsis; /* 溢出时显示省略号 */
}

.operation-i {
  min-width: 40px;
  text-align: start;
  font-size: 12px;
  padding-right: 50px;
  color: #555666;
  line-height: 10px;
  padding-top: 0;
  display: flex;
}

.text1 {
  font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif;
}


.item {
  margin-top: 10px;
  margin-right: 40px;
}

/*评论回复*/

.avatar-container {
  position: relative;
  top: 0%; /* 相对于容器顶部的偏移量为 50% */
  left: 45%; /* 相对于容器左侧的偏移量为 50% */
  /*transform: translate(-50%, -50%); !* 使用 transform 属性进行微调 *!*/
  /* 可以设置内容区域的宽度、高度、背景色等样式 */

}

.avatar-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #00bcd4; /* 设置边框的颜色和粗细 */
}

.avatar-wrapper img {
  display: block;
  width: 100%;
  height: 80%;
}

.el-aside {
  background-color: #E9EEF3;
}

button {
  outline: none;
}

.my_button {
  color: #f56c6c;
  background: #fef0f0;
  border: #fbc4c4 solid;
  border-radius: 20px;
  padding: 12px 23px;
  text-align: center;
  font-size: 16px;
  -webkit-transform: scale(0.7);
}

.my_button:hover {
  cursor: pointer;
}


</style>
